<template>
  <div class="mobile-journal-timeline common-mobile-view">
    <el-date-picker
        v-model="currentYear"
        type="year" placeholder="请选择年份"
        style="width: 100px"
        @change="changeDateEvent"
    />

    <el-timeline v-if="journalStore.journalList.length > 0" class="journal-timeline">
      <el-timeline-item v-for="(item, index) in journalStore.journalList"
                        :key="index" :timestamp="formatDate(item.date)" placement="top">
        <journal-card :item="item" />
      </el-timeline-item>
    </el-timeline>

    <el-empty v-else description="暂无日记"/>
  </div>
</template>

<script setup lang="ts">
import JournalCard from '@/components/Journal/JournalCard.vue'
import { useJournalStore } from '@/store/journal.ts'
import { onMounted, ref } from 'vue'
import { formatDate, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'

const currentYear = ref(new Date())
const journalStore = useJournalStore()

onMounted(async () => {
  const dateInfo = getStartEndDate(getCurrentYear(), 'year')
  journalStore.queryInfo.startDate = dateInfo[0]
  journalStore.queryInfo.endDate = dateInfo[1]
  await journalStore.refreshInfo()
})

const changeDateEvent = async (value: Date) => {
  const dateInfo = getStartEndDate(value, 'year')
  journalStore.queryInfo.startDate = dateInfo[0]
  journalStore.queryInfo.endDate = dateInfo[1]
  await journalStore.refreshInfo()
}
</script>

<style lang="scss">
.mobile-journal-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;

  .journal-timeline {
    padding: 10px;
  }
}
</style>
